<template>
	<view class="content">
		<view class="swiperBox">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" autoplay="true" circular="true">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<image :src="item.img_url" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="iconList">
			<view class="iconItem" @click="openWomanList()">
				<image src="/static/image/indexIcon_01.png" mode=""></image>
				<view class="text">精选月嫂</view>
			</view>
			<view class="iconItem" @click="openFlowList()">
				<image src="/static/image/indexIcon_02.png" mode=""></image>
				<view class="text">媒合流程</view>
			</view>
			<view class="iconItem">
				<image src="/static/image/indexIcon_03.png" mode=""></image>
				<view class="text">培训课程</view>
			</view>
			<view class="iconItem" @click="openNewsList()">
				<image src="/static/image/indexIcon_04.png" mode=""></image>
				<view class="text">最新消息</view>
			</view>
			<view class="iconItem" @click="openEnterList()">
				<image src="/static/image/indexIcon_05.png" mode=""></image>
				<view class="text">月嫂入驻</view>
			</view>
		</view>
		<view class="coupon">
			<view class="head">
				<view class="left">
					<image src="/static/image/coupon.png" mode="scaleToFill"></image>专享优惠券
				</view>
				<view class="more" @click="openCoupon()">更多<uni-icon type="arrow" size="19"></uni-icon>
				</view>
			</view>
			<view class="content" v-if="couponList == 0 ? false : true">
				<view class="item" v-for="(item, index) in couponList" :key="index" @click="openCoupon()">
					<text class="price">{{item.face_value}}</text>
					<view class="desc">{{item.type == 1 ? '新人券' : '满减券'}}</view>
					<image src="/static/image/couponBox.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="womanList">
			<view class="head">
				<view class="left">
					<image src="/static/image/medal.png" mode="scaleToFill"></image>月嫂之星
				</view>
			</view>
			<view class="content">
				<swiper style="background-color: #fff;width: 100%;" indicator-color="#f1f1f1" indicator-active-color="#ff5c5d"
				 :indicator-dots="ifdots">
					<swiper-item v-for="(item, index) in womanList" :key="index">
						<view class="item" @click="openWomanDetail" v-for="(it, ind) in item" :key="ind" :data-womanid="it.id">
							<view class="headImg">
								<image :src="it.head_url" mode="scaleToFill"></image>
							</view>
							<view class="name">{{it.name}}</view>
							<text class="label">{{it.star_name}}</text>
							<view class="desc">{{it.introduce}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="shadow" v-if="ifShadow" catchtouchmove="move">
			<view class="shadow-box">
				<view class="title">提示</view>
				<view class="desc">抱歉，您当前不在服务地区!</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 高德地图
	// import amap from '../../static/amap-wx.js';
	// 腾讯地图
	import QQMapWX from '../../static/qqmap-wx-jssdk.min.js'
	//icon字体
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	//轮播图带指示器
	import {
		uniSwiperDot
	} from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	//dns
	import {
		dns
	} from "@/pages/dns.js"
	export default {
		data() {
			return {
				info: [], //轮播图
				current: 0,
				mode: 'long',
				couponList: 0, //优惠券
				amapPlugin: null,
				key: 'e58ac18ae61e56c0925ba23095066752',
				cityName: '',
				stateName: '',
				provinceName: '',//台湾省
				weather: {
					hasData: false,
					data: []
				},
				ifShadow: false,
				region: 1,
				womanList: [], //月嫂之星
				ifdots: true
			}
		},
		watch: {
			info(newval, oldval) {
				// console.log(newval,oldval)
			}
		},
		components: {
			uniIcon,
			uniSwiperDot
		},
		onLoad() {
			// this.amapPlugin = new amap.AMapWX({
			// 	key: this.key  
			// })
			this.getRegeo();
			this.getSwiperList();
			this.getCouponList();
			this.getwomanList();
		},
		onShow() {
			var refresh = uni.getStorageSync("refresh");
			if(refresh == 1){
				this.womanList = [];
				this.getwomanList(1,20,this.region,'','','','');
				uni.removeStorageSync("refresh");
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			getRegeo() { //获取地理信息
				uni.showLoading({
					title: '获取信息中'
				});
				// this.amapPlugin.getRegeo({  
				// 	success: (data) => {  
				// 		console.log(data)  
				// 		this.cityName = data[0].regeocodeData.addressComponent.city;
				// 		this.stateName = data[0].regeocodeData.addressComponent.country;
				// 		uni.hideLoading();
				// 		console.log(this.cityName,this.stateName)
				// 		if(this.cityName !== '合肥市' && this.stateName !== '马来西亚'){//不在服务区显示遮罩层
				// 			this.ifShadow = true;
				// 			return
				// 		}
				// 		if(this.cityName == '合肥市'){
				// 			this.region = 1;
				// 			uni.setStorageSync("region",1)
				// 		};
				// 		if(this.stateName == '马来西亚'){
				// 			this.region = 2;
				// 			uni.setStorageSync("region",2)
				// 		}
				// 	},
				// 	fail: (info)=>{
				// 		//失败回调
				// 		uni.hideLoading();
				// 		this.ifShadow = true;//记得更改回true!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
				// 	 }
				// });  
				//腾讯地图获取当前位置
				var qqmapsdk = new QQMapWX({
					key: 'XM4BZ-R5BHX-FIA4V-ZFFFN-QKEXO-3CFSP'
				});
				uni.getLocation({
					type: 'wgs84',
					success: (res)=>{
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (res)=>{
								console.log(res)
								this.cityName = res.result.address_component.city;
								this.stateName = res.result.address_component.nation;
								this.provinceName = res.result.address_component.province;//客户台湾省
								uni.hideLoading();
								console.log(this.cityName, this.stateName)
								if (this.cityName !== '合肥市' && this.stateName !== '马来西亚' && this.provinceName !== '台湾省') { //不在服务区显示遮罩层
									this.ifShadow = true;
									return
								}
								if (this.cityName == '合肥市' || this.provinceName == '台湾省') {
									this.region = 1;
									uni.setStorageSync("region", 1)
								};
								if (this.stateName == '马来西亚') {
									this.region = 2;
									uni.setStorageSync("region", 2)
								}
							}
						})
					},
					fail:(err)=>{
						// 失败回调
						uni.hideLoading();
						this.ifShadow = true;//记得更改回true!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
					}
				});
			},
			getSwiperList() { //获取轮播图
				uni.request({
					method: 'GET',
					url: dns + 'carousel/list',
					success: (res) => {
						if (res.data.status == 1) {
							this.info = res.data.data
						}

					}
				})
			},
			getCouponList() { //获取优惠券列表
				uni.request({
					method: 'GET',
					data: {
						page: 1,
						limit: 5
					},
					header: {
						token: uni.getStorageSync("token")
					},
					url: dns + 'coupon/list',
					success: (res) => {
						console.log(res)
						if (res.data.status == 1) {
							this.couponList = res.data.data
						}
						if (res.data.status == 0) {
							this.couponList = 0
						}
					}
				})
			},
			getwomanList() { //获取月嫂之星列表
				uni.request({
					method: 'GET',
					data: {
						page: 1,
						limit: 100,
						region: this.region
					},
					url: dns + 'matron/home/page/list',
					success: (res) => {
						if (res.data.status == 1) {
							let pageList = [];
							res.data.data.forEach((item, index) => {
								let page = Math.floor(index / 6);
								if (!pageList[page]) {
									pageList[page] = []
								};
								pageList[page].push(item)
							});
							this.womanList = pageList;
							var length = pageList.length;
							if (length == 1) {
								this.ifdots = false;
							}
						}
					}
				})
			},
			openWomanList() { //打开月嫂列表
				uni.navigateTo({
					url: '/pages/index/list/index'
				});
			},
			openFlowList() { //打开媒合流程
				uni.navigateTo({
					url: '/pages/index/flow/index'
				});
			},
			openNewsList() { //打开最新消息
				uni.navigateTo({
					url: '/pages/index/news/index'
				});
			},
			openEnterList() { //打开月嫂入驻
				uni.navigateTo({
					url: '/pages/index/enter/index'
				});
			},
			openCoupon() { //打开更多优惠券
				uni.navigateTo({
					url: '/pages/index/coupon/index'
				});
			},
			openWomanDetail(e) { //打开月嫂详情介绍
				var id = e.currentTarget.dataset.womanid;
				uni.navigateTo({
					url: '/pages/index/detail/index?id=' + id
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	//轮播图
	.swiperBox {
		background-color: #fff;

		.swiper-box {
			swiper-item {
				width: 100%;
				height: 100%
			}
		}
	}

	//九宫格列表
	.iconList {
		display: flex;
		width: 100%;
		padding: 20upx 20upx;
		background-color: #fff;

		.iconItem {
			width: 20%;
			text-align: center;

			image {
				width: 80upx;
				height: 80upx;
			}

			.text {
				text-align: center;
				font-size: 28upx;
			}
		}
	}

	//优惠券
	.coupon {
		margin-top: 10upx;
		background-color: #fff;

		.head {
			position: relative;
			line-height: 100upx;
			padding: 0 30upx;
			padding-left: 80upx;
			display: flex;
			justify-content: space-between;
			font-size: 30upx;

			.left {
				image {
					position: absolute;
					top: 30upx;
					left: 30upx;
					width: 40upx;
					height: 40upx;
				}
			}

			.more {
				position: relative;
				color: #7d7d7d;
				padding-right: 36upx;

				uni-icon {
					position: absolute;
					top: 8upx;
					right: 0;
				}
			}
		}

		.content {
			overflow-x: scroll;
			padding: 0 30upx 24upx 30upx;
			display: flex;
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;

			.item {
				position: relative;
				width: 244upx;
				flex-shrink: 0;
				height: 88upx;
				margin-right: 10upx;
				font-size: 18upx;
				color: #fff;

				image {
					width: 100%;
					height: 100%
				}

				.price {
					position: absolute;
					left: 120upx;
					top: 12upx;
					font-size: 28upx;
					font-weight: 200
				}

				.desc {
					position: absolute;
					left: 76upx;
					top: 58upx;
					width: 160upx;
					overflow: hidden;
					text-align: center;
					font-weight: 200;
				}
			}
		}

		.content::-webkit-scrollbar {
			display: none
		}
	}

	.womanList {
		margin-top: 5px;
		background-color: #fff;

		.head {
			position: relative;
			line-height: 100upx;
			padding: 0 30upx;
			padding-left: 80upx;
			font-size: 30upx;

			.left {
				image {
					position: absolute;
					top: 30upx;
					left: 30upx;
					width: 40upx;
					height: 40upx;
				}
			}
		}

		.content {
			height: 630upx;

			swiper {
				height: 100%;

				swiper-item {
					padding: 0 30upx 60upx 30upx;
					display: flex;
					flex-wrap: wrap;
					align-content: flex-start;

					.item {
						width: 200upx;
						height: 270upx;
						border-radius: 16upx;
						border: 4upx solid rgba(242, 242, 242, 0.8);
						flex-shrink: 0;
						margin-right: 42upx;
						margin-bottom: 20upx;
						font-size: 18upx;
						color: #7d7d7d;
						text-align: center;

						.headImg {
							width: 110upx;
							height: 110upx;
							border-radius: 50%;
							margin: 0 auto;
							margin-top: 10upx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%
							}
						}

						.name {
							text-align: center;
							font-size: 28upx;
							margin-bottom: 4upx;
						}

						.label {
							border-radius: 14upx;
							padding: 0 4upx;
							font-size: 16upx;
							border: 2upx solid rgba(239, 187, 103, 0.5);
							color: #efbb67;
						}

						.desc {
							margin: 10upx 4upx 0 10upx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}

					.item:nth-of-type(3n) {
						margin-right: 0;
					}
				}
			}
		}
	}

	.shadow {
		position: fixed;
		z-index: 99999;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .3);
		display: flex;
		justify-content: center;
		align-items: center;

		.shadow-box {
			width: 70%;
			height: 150upx;
			background-color: #fff;
			font-size: 26upx;
			border-radius: 30upx;
			text-align: center;
			padding-top: 20upx;

			.title {
				margin-bottom: 20upx;
				font-size: 30upx;
				font-weight: bold;
			}
		}
	}
</style>
